<script type="text/javascript">
	$(document).ready(function() {
		var tn1 = $('.mygallery').tn3({
		    skinDir:'<?php echo Yii::app()->request->baseUrl; ?>/skins',
		    autoplay:true,
		    width:770,
		    delay:5000,
		    skin:"tn3e", 
		    imageClick:"url",
		    image:{
			crop:true,
			transitions:[{
			    type:"blinds",
			    duration:300
			    },
			    {
			    type:"grid",
			    duration:160,
			    gridX:9,
			    gridY:7,
			    easing:"easeInCubic",
			    sort:"circle"
			    },{
			    type:"slide",
			    duration:430,
			    easing:"easeInOutExpo"
			    }]
		    }		   
		    });
	});
</script>

 <div class="mygallery">
	<div class="tn3 album">
	    <h4>Large Images</h4>
	    <div class="tn3 description">Large Images, good for fullscreen view</div>
	    <div class="tn3 thumb"><?php echo count($model->images)>0?$model->images[0]->getImagePath("114x72"):""; ?> </div>
	    <ol>
	    <?php 
	    	foreach ($model->images as $image){
	    		echo "<li><h4>".$model->name."</h4><div class='tn3 description'>".$image->title."</div>	    		
	    		<a href='".$image->getImagePath()."'>";
	    		echo "<img src='".$image->getImagePath("114x72")."'></a></li>";
	    	}
	    ?>		
	    </ol>
	</div>
	<div class="tn3 album">
	    <h4>Fixed Dimensions</h4>
	    <div class="tn3 description">Images with fixed dimensions</div>
	    <div class="tn3 thumb"><?php  echo count($model->images)>0? $model->images[0]->getImagePath("114x72"):"";?></div>
	    <ol>
	     <?php 
			foreach ($model->images as $image){
	    		echo "<li>
	    		<h4>".$model->name."</h4>
	    		<div class='tn3 description'>Zakynthos island, Greece</div> 		
	    		<a href='".$image->getImagePath("920x360")."'>";
	    		echo "<img src='".$image->getImagePath("114x72")."'></a></li>";
	    	}
	    ?>		
		
	    </ol>
	</div>
    </div>  
